import React from 'react'
// useRoutes让路由以配置式的方式来定义和使用
import { useRoutes } from 'react-router-dom'

import Home from '@/pages/Home'
import Admin from '@/views/Admin'
import User from '@/views/User'
import Food from '@/views/Food'

const App = () => {
  const routes = useRoutes([
    {
      path: '/',
      element: <Home />
    },
    {
      path: '/admin',
      element: <Admin />,
      children: [
        {
          index: true,
          element: <User />
        },
        {
          path: 'user',
          element: <User />
        },
        {
          path: 'food',
          element: <Food />
        },
        {
          path: '*',
          element: <Food />
        }
      ]
    }
  ])
  return <>{routes}</>
}

export default App
